/**
 * 系统设计与功能模块组件
 * 展示技术演进路线图、系统架构图和功能清单
 */

import { motion } from "framer-motion";

interface SystemDesignSectionProps {
    sectionRef: (el: HTMLElement | null) => void;
}

export default function SystemDesignSection({ sectionRef }: SystemDesignSectionProps) {
    return (
        <section
            id="system-design"
            ref={sectionRef}
            className="py-20 bg-gray-50">
            <div className="max-w-7xl mx-auto px-6">
                <motion.div
                    initial={{
                        opacity: 0,
                        y: 20
                    }}
                    whileInView={{
                        opacity: 1,
                        y: 0
                    }}
                    transition={{
                        duration: 0.6
                    }}
                    viewport={{
                        once: true
                    }}>
                    <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">系统设计与功能模块</h2>
                </motion.div>

                {/* 技术路线图部分 */}
                <motion.div
                    initial={{
                        opacity: 0,
                        y: 30
                    }}
                    whileInView={{
                        opacity: 1,
                        y: 0
                    }}
                    transition={{
                        duration: 0.6
                    }}
                    viewport={{
                        once: true
                    }}
                    className="bg-white rounded-2xl shadow-xl p-8 mb-16">
                    <h3 className="text-2xl font-semibold text-indigo-800 mb-8 text-center">技术演进路线图</h3>
                    
                    <div className="relative overflow-x-auto">
                        <div className="min-w-[800px]">
                            {/* 阶段指示器 */}
                            <div className="flex justify-between items-center mb-12 relative">
                                <div className="absolute top-1/2 left-0 right-0 h-1 bg-gray-200 -translate-y-1/2 z-0"></div>
                                
                                {/* 阶段1 */}
                                <div className="relative z-10 flex flex-col items-center">
                                    <div className="w-16 h-16 rounded-full bg-green-500 flex items-center justify-center text-white font-bold text-xl mb-4 border-4 border-white shadow-lg">1</div>
                                    <h4 className="font-semibold text-gray-800">核心功能实现</h4>
                                    <p className="text-sm text-green-600 font-medium">已完成</p>
                                </div>
                                
                                {/* 阶段2 */}
                                <div className="relative z-10 flex flex-col items-center">
                                    <div className="w-16 h-16 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold text-xl mb-4 border-4 border-white shadow-lg">2</div>
                                    <h4 className="font-semibold text-gray-800">体验优化</h4>
                                    <p className="text-sm text-blue-600 font-medium">1-3个月</p>
                                </div>
                                
                                {/* 阶段3 */}
                                <div className="relative z-10 flex flex-col items-center">
                                    <div className="w-16 h-16 rounded-full bg-orange-500 flex items-center justify-center text-white font-bold text-xl mb-4 border-4 border-white shadow-lg">3</div>
                                    <h4 className="font-semibold text-gray-800">智能化升级</h4>
                                    <p className="text-sm text-orange-600 font-medium">3-6个月</p>
                                </div>
                                
                                {/* 阶段4 */}
                                <div className="relative z-10 flex flex-col items-center">
                                    <div className="w-16 h-16 rounded-full bg-purple-500 flex items-center justify-center text-white font-bold text-xl mb-4 border-4 border-white shadow-lg">4</div>
                                    <h4 className="font-semibold text-gray-800">平台化</h4>
                                    <p className="text-sm text-purple-600 font-medium">6-12个月</p>
                                </div>
                                
                                {/* 阶段5 */}
                                <div className="relative z-10 flex flex-col items-center">
                                    <div className="w-16 h-16 rounded-full bg-pink-500 flex items-center justify-center text-white font-bold text-xl mb-4 border-4 border-white shadow-lg">5</div>
                                    <h4 className="font-semibold text-gray-800">生态建设</h4>
                                    <p className="text-sm text-pink-600 font-medium">12个月+</p>
                                </div>
                            </div>
                            
                            {/* 阶段内容 */}
                            <div className="space-y-10">
                                {/* 阶段1详情 */}
                                <div className="bg-green-50 p-6 rounded-xl">
                                    <h4 className="text-lg font-bold text-green-800 mb-4">第一阶段：核心功能实现 ✅</h4>
                                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                                        <div className="bg-white p-4 rounded-lg shadow-sm">
                                            <h5 className="font-semibold text-gray-800 mb-2">前端技术栈</h5>
                                            <ul className="text-sm text-gray-600 space-y-1">
                                                <li>• React 18 & TypeScript</li>
                                                <li>• Tailwind CSS & Vite</li>
                                                <li>• React Router</li>
                                            </ul>
                                        </div>
                                        <div className="bg-white p-4 rounded-lg shadow-sm">
                                            <h5 className="font-semibold text-gray-800 mb-2">AI能力集成</h5>
                                            <ul className="text-sm text-gray-600 space-y-1">
                                                <li>• 通义千问 SDK</li>
                                                <li>• qwen-long (解析)</li>
                                                <li>• qwen-3 (评估)</li>
                                                <li>• 多语言支持</li>
                                            </ul>
                                        </div>
                                        <div className="bg-white p-4 rounded-lg shadow-sm">
                                            <h5 className="font-semibold text-gray-800 mb-2">数据存储</h5>
                                            <ul className="text-sm text-gray-600 space-y-1">
                                                <li>• IndexedDB 主存储</li>
                                                <li>• LocalStorage 备份</li>
                                                <li>• PDF 二进制存储</li>
                                                <li>• 数据迁移方案</li>
                                            </ul>
                                        </div>
                                        <div className="bg-white p-4 rounded-lg shadow-sm">
                                            <h5 className="font-semibold text-gray-800 mb-2">业务功能</h5>
                                            <ul className="text-sm text-gray-600 space-y-1">
                                                <li>• 简历上传与解析</li>
                                                <li>• AI 匹配与评估</li>
                                                <li>• 候选人管理</li>
                                                <li>• 面试流程安排</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                
                                {/* 其他阶段简要信息 */}
                                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div className="bg-blue-50 p-6 rounded-xl">
                                        <h4 className="text-lg font-bold text-blue-800 mb-3">第二阶段：体验优化 (1-3个月)</h4>
                                        <p className="text-sm text-gray-700">移动端适配、性能优化、用户体验提升、文件支持扩展</p>
                                    </div>
                                    <div className="bg-orange-50 p-6 rounded-xl">
                                        <h4 className="text-lg font-bold text-orange-800 mb-3">第三阶段：智能化升级 (3-6个月)</h4>
                                        <p className="text-sm text-gray-700">AI能力增强、数据智能、自动化流程、系统集成生态</p>
                                    </div>
                                    <div className="bg-purple-50 p-6 rounded-xl">
                                        <h4 className="text-lg font-bold text-purple-800 mb-3">第四阶段：平台化 (6-12个月)</h4>
                                        <p className="text-sm text-gray-700">微服务架构、多租户SaaS、开放平台、企业级特性</p>
                                    </div>
                                    <div className="bg-pink-50 p-6 rounded-xl">
                                        <h4 className="text-lg font-bold text-pink-800 mb-3">第五阶段：生态建设 (12个月+)</h4>
                                        <p className="text-sm text-gray-700">人才生态、AI开放平台、全球化部署、行业解决方案</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </motion.div>
                
                {/* 系统架构图部分 */}
                <motion.div
                    initial={{
                        opacity: 0,
                        y: 30
                    }}
                    whileInView={{
                        opacity: 1,
                        y: 0
                    }}
                    transition={{
                        duration: 0.6,
                        delay: 0.2
                    }}
                    viewport={{
                        once: true
                    }}
                    className="bg-white rounded-2xl shadow-xl p-8 mb-16">
                    <h3 className="text-2xl font-semibold text-indigo-800 mb-8 text-center">系统架构图</h3>
                    
                    <div className="relative overflow-x-auto">
                        <div className="min-w-[900px]">
                            {/* 分层架构图 */}
                            <div className="flex flex-col space-y-8">
                                {/* 用户界面层 */}
                                <div className="bg-blue-50 p-4 rounded-lg">
                                    <h4 className="font-bold text-blue-800 mb-3">用户界面层 Presentation Layer</h4>
                                    <div className="grid grid-cols-2 gap-4 ml-4">
                                        <div className="bg-white p-3 rounded shadow-sm">
                                            <h5 className="font-semibold text-gray-800 mb-2">核心页面</h5>
                                            <ul className="text-sm text-gray-600 space-y-1">
                                                <li>• Dashboard 仪表盘</li>
                                                <li>• CandidateList 候选人管理</li>
                                                <li>• EvaluationReport 评估报告</li>
                                                <li>• Statistics 数据统计</li>
                                                <li>• History 历史记录</li>
                                            </ul>
                                        </div>
                                        <div className="bg-white p-3 rounded shadow-sm">
                                            <h5 className="font-semibold text-gray-800 mb-2">通用组件</h5>
                                            <ul className="text-sm text-gray-600 space-y-1">
                                                <li>• InterviewScheduler 面试安排</li>
                                                <li>• JobPositionConfig 岗位配置</li>
                                                <li>• PDFPreview PDF预览</li>
                                                <li>• MarkdownBlock Markdown渲染</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                
                                {/* 业务逻辑层 */}
                                <div className="bg-orange-50 p-4 rounded-lg">
                                    <h4 className="font-bold text-orange-800 mb-3">业务逻辑层 Business Logic Layer</h4>
                                    <div className="grid grid-cols-3 gap-4 ml-4">
                                        <div className="bg-white p-3 rounded shadow-sm">
                                            <h5 className="font-semibold text-gray-800 mb-2">服务层</h5>
                                            <ul className="text-sm text-gray-600 space-y-1">
                                                <li>• tongyi 通义千问服务</li>
                                                <li>• pdfParser PDF解析服务</li>
                                            </ul>
                                        </div>
                                        <div className="bg-white p-3 rounded shadow-sm">
                                            <h5 className="font-semibold text-gray-800 mb-2">工具层</h5>
                                            <ul className="text-sm text-gray-600 space-y-1">
                                                <li>• indexedDBStorage 存储工具</li>
                                                <li>• utils 通用工具</li>
                                            </ul>
                                        </div>
                                        <div className="bg-white p-3 rounded shadow-sm">
                                            <h5 className="font-semibold text-gray-800 mb-2">钩子函数</h5>
                                            <ul className="text-sm text-gray-600 space-y-1">
                                                <li>• useTheme 主题钩子</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                
                                {/* 配置层 */}
                                <div className="bg-purple-50 p-4 rounded-lg">
                                    <h4 className="font-bold text-purple-800 mb-3">配置层 Configuration Layer</h4>
                                    <div className="ml-4">
                                        <div className="bg-white p-3 rounded shadow-sm w-1/3">
                                            <h5 className="font-semibold text-gray-800 mb-2">岗位配置数据</h5>
                                            <p className="text-sm text-gray-600">jobPositions</p>
                                        </div>
                                    </div>
                                </div>
                                
                                {/* 数据存储层 */}
                                <div className="bg-green-50 p-4 rounded-lg">
                                    <h4 className="font-bold text-green-800 mb-3">数据存储层 Data Storage Layer</h4>
                                    <div className="grid grid-cols-2 gap-4 ml-4">
                                        <div className="bg-white p-3 rounded shadow-sm">
                                            <h5 className="font-semibold text-gray-800 mb-2">IndexedDB</h5>
                                            <p className="text-sm text-gray-600">主存储</p>
                                        </div>
                                        <div className="bg-white p-3 rounded shadow-sm">
                                            <h5 className="font-semibold text-gray-800 mb-2">LocalStorage</h5>
                                            <p className="text-sm text-gray-600">备份存储</p>
                                        </div>
                                    </div>
                                </div>
                                
                                {/* 外部服务层 */}
                                <div className="bg-red-50 p-4 rounded-lg">
                                    <h4 className="font-bold text-red-800 mb-3">外部服务层 External Services</h4>
                                    <div className="ml-4">
                                        <div className="bg-white p-3 rounded shadow-sm w-1/2">
                                            <h5 className="font-semibold text-gray-800 mb-2">阿里云 DashScope</h5>
                                            <ul className="text-sm text-gray-600 space-y-1">
                                                <li>• 通义千问 qwen-long</li>
                                                <li>• 通义千问 qwen3-next-80b</li>
                                                <li>• 文件上传API</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </motion.div>
                
                {/* 功能模块部分 */}
                <motion.div
                    initial={{
                        opacity: 0,
                        y: 30
                    }}
                    whileInView={{
                        opacity: 1,
                        y: 0
                    }}
                    transition={{
                        duration: 0.6,
                        delay: 0.4
                    }}
                    viewport={{
                        once: true
                    }}
                    className="bg-white rounded-2xl shadow-xl p-8">
                    <h3 className="text-2xl font-semibold text-indigo-800 mb-8 text-center">系统功能清单</h3>
                    
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                        {/* 左侧功能模块 */}
                        <div className="space-y-6">
                            <div>
                                <h4 className="text-lg font-bold text-gray-800 mb-4 flex items-center">
                                    <i className="fa-solid fa-home text-blue-500 mr-2"></i> Dashboard (仪表盘)
                                </h4>
                                <ul className="space-y-2 ml-6">
                                    <li className="flex items-start">
                                        <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                        <span className="text-gray-700">简历文件上传 (支持PDF、Word格式，最大10MB)</span>
                                    </li>
                                    <li className="flex items-start">
                                        <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                        <span className="text-gray-700">文件类型验证和大小检查</span>
                                    </li>
                                    <li className="flex items-start">
                                        <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                        <span className="text-gray-700">实时上传进度显示</span>
                                    </li>
                                    <li className="flex items-start">
                                        <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                        <span className="text-gray-700">PDF文件预览功能</span>
                                    </li>
                                    <li className="flex items-start">
                                        <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                        <span className="text-gray-700">岗位配置选择与评估维度权重调整</span>
                                    </li>
                                </ul>
                            </div>
                            
                            <div>
                                <h4 className="text-lg font-bold text-gray-800 mb-4 flex items-center">
                                    <i className="fa-solid fa-chart-line text-blue-500 mr-2"></i> EvaluationReport (评估报告)
                                </h4>
                                <ul className="space-y-2 ml-6">
                                    <li className="flex items-start">
                                        <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                        <span className="text-gray-700">AI生成的候选人评估概要</span>
                                    </li>
                                    <li className="flex items-start">
                                        <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                        <span className="text-gray-700">基于评分的面试推荐级别</span>
                                    </li>
                                    <li className="flex items-start">
                                        <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                        <span className="text-gray-700">多维度评估：专业背景、技能匹配、经验匹配、综合适配性</span>
                                    </li>
                                    <li className="flex items-start">
                                        <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                        <span className="text-gray-700">能力雷达图可视化展示</span>
                                    </li>
                                    <li className="flex items-start">
                                        <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                        <span className="text-gray-700">详细分析报告与改进建议</span>
                                    </li>
                                </ul>
                            </div>
                            
                            <div>
                                <h4 className="text-lg font-bold text-gray-800 mb-4 flex items-center">
                                    <i className="fa-solid fa-users text-blue-500 mr-2"></i> CandidateList (候选人管理)
                                </h4>
                                <ul className="space-y-2 ml-6">
                                    <li className="flex items-start">
                                        <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                        <span className="text-gray-700">候选人列表展示和分页</span>
                                    </li>
                                    <li className="flex items-start">
                                        <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                        <span className="text-gray-700">多维度筛选与搜索功能</span>
                                    </li>
                                    <li className="flex items-start">
                                        <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                        <span className="text-gray-700">批量操作与状态管理</span>
                                    </li>
                                    <li className="flex items-start">
                                        <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                        <span className="text-gray-700">PDF简历预览与面试安排功能</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        
                        {/* 右侧功能模块 */}
                        <div className="space-y-6">
                            <div>
                                <h4 className="text-lg font-bold text-gray-800 mb-4 flex items-center">
                                    <i className="fa-solid fa-bar-chart text-blue-500 mr-2"></i> Statistics (数据分析统计)
                                </h4>
                                <ul className="space-y-2 ml-6">
                                    <li className="flex items-start">
                                        <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                        <span className="text-gray-700">整体统计概览与趋势分析图表</span>
                                    </li>
                                    <li className="flex items-start">
                                        <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                        <span className="text-gray-700">专业表现分析与面试官工作量统计</span>
                                    </li>
                                    <li className="flex items-start">
                                        <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                        <span className="text-gray-700">岗位匹配度分析与成功率预测模型</span>
                                    </li>
                                    <li className="flex items-start">
                                        <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                        <span className="text-gray-700">候选人质量热力图与AI预测洞察</span>
                                    </li>
                                </ul>
                            </div>
                            
                            <div>
                                <h4 className="text-lg font-bold text-gray-800 mb-4 flex items-center">
                                    <i className="fa-solid fa-history text-blue-500 mr-2"></i> History (历史记录)
                                </h4>
                                <ul className="space-y-2 ml-6">
                                    <li className="flex items-start">
                                        <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                        <span className="text-gray-700">历史评估记录展示与多语言支持</span>
                                    </li>
                                    <li className="flex items-start">
                                        <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                        <span className="text-gray-700">初筛通过率统计与语言分布统计</span>
                                    </li>
                                    <li className="flex items-start">
                                        <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                        <span className="text-gray-700">快速跳转到评估报告与数据重新加载</span>
                                    </li>
                                </ul>
                            </div>
                            
                            <div>
                                <h4 className="text-lg font-bold text-gray-800 mb-4 flex items-center">
                                    <i className="fa-solid fa-calendar-alt text-blue-500 mr-2"></i> InterviewScheduler (面试安排)
                                </h4>
                                <ul className="space-y-2 ml-6">
                                    <li className="flex items-start">
                                        <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                        <span className="text-gray-700">面试时间选择与面试方式选择</span>
                                    </li>
                                    <li className="flex items-start">
                                        <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                        <span className="text-gray-700">面试官信息配置与面试地点设置</span>
                                    </li>
                                    <li className="flex items-start">
                                        <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                        <span className="text-gray-700">邮件通知发送与候选人状态更新</span>
                                    </li>
                                </ul>
                            </div>
                            
                            <div>
                                <h4 className="text-lg font-bold text-gray-800 mb-4 flex items-center">
                                    <i className="fa-solid fa-cogs text-blue-500 mr-2"></i> JobPositionConfig (岗位配置)
                                </h4>
                                <ul className="space-y-2 ml-6">
                                    <li className="flex items-start">
                                        <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                        <span className="text-gray-700">多岗位预定义与岗位信息编辑</span>
                                    </li>
                                    <li className="flex items-start">
                                        <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                        <span className="text-gray-700">评估权重配置与自动平衡功能</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </motion.div>
            </div>
        </section>
    );
}